<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/admin/_layouts/default">
<head>
    <title>系统参数管理</title>
</head>
<body>
<div layout:fragment="content">
        <!--查询框-->
        <query-modal th:replace="/admin/system/variable/query-modal :: query-modal"></query-modal>
        <!--./查询框-->
        <!-- 位置提示 -->
        <section class="content-header">
            <h1>
                系统参数管理
                <small>设置系统参数或配置</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">系统参数管理</li>
            </ol>
        </section>
        <!-- 内容区域 -->
        <section class="content">
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <header class="tool-bar">
                                <h3 class="pull-left">系统参数管理</h3>
                                <div class="pull-right tool-button">
                                    <a th:href="@{/admin/system/variable/add-view.html}"
                                       class="btn btn-primary" data-pjax>
                                        <i class="fa fa-plus"></i> 增加配置项
                                    </a>
                                    <button class="btn btn-danger" id="js-trash">
                                        <i class="fa fa-trash-o"></i> 删除选中
                                    </button>
                                </div>
                            </header>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="js-system-var-table" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>配置项</th>
                                    <th>参数值</th>
                                    <th>说明</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </section>
        <!-- /内容区域 -->
        <script>
            var allRequest = {};
            $(function () {
                // 所有网络请求
                allRequest = {
                    deletes: function (ids) {
                        if (!!ids && !!ids.length) {
                            layer.confirm('确定删除选中的 ' + ids.length + ' 行？', {
                                btn: ['确定', '取消'] //按钮
                            }, function () {
                                $.post('/admin/system/variable/delete', {id: ids.toString()}, function (data) {
                                    if (data.code === 200) {
                                        layer.msg(data.message, {icon: 1});
                                        table.reloadPage();
                                    } else {
                                        layer.msg(data.message, {icon: 2});
                                    }
                                }, 'json');
                            }, function () {
                                layer.msg('取消删除');
                            });
                        } else {
                            layer.msg('请先选中行');
                        }
                    },
                    deleteById: function (id) {
                        this.deletes([id])
                    }
                };

                // 系统参数配置表格
                const table = {
                    $obj: $('#js-system-var-table'),
                    dataTableObject: null,
                    getSelectedRow: function () {
                        return this.dataTableObject.rows('.selected').data();
                    },
                    init: function () {
                        // 初始化
                        this.dataTableObject = this.$obj.DataTable({
                            dom: '<"toolbar">frtip',
                            ordering: true,
                            searching: false,
                            select: true,
                            autoWidth: true,
                            processing: false,
                            serverSide: true,
                            deferRender: true,
                            language: DATA_TABLE_CONFIG.language,
                            preDrawCallback: DATA_TABLE_CONFIG.preDrawCallback,
                            order: [[0, "desc"]],
                            ajax: {
                                url: '/admin/system/variable/data',
                                type: 'POST',
                                contentType: 'application/json',
                                data: function (params) {
                                    // 携带参数
                                    return JSON.stringify(params);
                                }
                            },
                            columns: [
                                {data: 'key', bSortable: true},
                                {data: 'value', bSortable: true},
                                {data: 'note', bSortable: true}
                            ],
                            columnDefs: [{ // 操作
                                render: function (data, type, row) {
                                    return '<div class="btn-group">' +
                                        '         <button type="button" class="btn btn-default btn-flat">操作</button>' +
                                        '         <button type="button" class="btn btn-default btn-flat dropdown-toggle" data-toggle="dropdown">' +
                                        '               <span class="caret"></span>' +
                                        '               <span class="sr-only">Toggle Dropdown</span>' +
                                        '         </button>' +
                                        '         <ul class="dropdown-menu" role="menu">' +
                                        '             <li><a href="/admin/system/variable/update-view/' + row.id + '" pjax-data>修改</a></li>' +
                                        '             <li class="divider"></li>' +
                                        '             <li><a href="javascript:;;" onclick="allRequest.deleteById(\'' + row.id + '\')">删除</a></li>' +
                                        '         </ul>' +
                                        '   </div>';
                                },
                                targets: 3
                            }]
                        });
                        // 绑定多选
                        this.$obj.children('tbody').on('click', 'tr', function () {
                            $(this).toggleClass('selected');
                        });

                        var that = this;
                        // ==========================自定义=============================
                        // + 删除选中事件
                        $('#js-trash').on('click', function () {
                            var selectedRow = that.getSelectedRow();
                            var ids = [];
                            if (!!selectedRow.length) {
                                $.each(selectedRow, function (i, obj) {
                                    ids.push(obj.id);
                                });
                            }
                            allRequest.deletes(ids);
                        });
                        // + 查询事件
                        $("#js-query").on('click', function () {
                            $('#js-query-model').modal('hide')
                            layer.msg('正在进行条件查询, 请稍后..');
                            that.$obj.ajax.reload();
                        });
                    },
                    reloadPage: function () {
                        this.dataTableObject.ajax.reload(null, false);
                    },
                    reloadAll: function () {
                        this.dataTableObject.ajax.reload();
                    }
                };
                table.init();
            });
        </script>
    </div>
</body>
</html>
